import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { useEventTarget } from 'ahooks';
import searchIcon from '../../assets/search/searchIcon.png';
import { useDispatch, useLocation, useSelector } from 'dva';
import { useIntl } from 'umi';
import InViewPort from '../../components/InViewPort';
import { Tabs } from 'antd-mobile';

function Index() {
  const [value, { reset, onChange }] = useEventTarget({ initialValue: '' });
  const dispatch = useDispatch();
  const { venues, exhibitor2021List, exhibitor2021PageIndex, exhibitor2021LastPage } = useSelector(
    ({ index }) => index,
  );
  function handelSearch() {
    dispatch({
      type: 'index/apiGetExhibitor2021',
      payload: {
        pageSize: 10,
        page: 0,
        key: value,
      },
      isReset: true,
    });
  }

  useEffect(() => {
    dispatch({
      type: 'index/getVenues',
      payload: {},
      isReset: true,
    });

    dispatch({
      type: 'index/apiGetExhibitor2021',
      payload: {
        pageSize: 10,
        page: 0,
        key: value,
      },
      isReset: true,
    });
  }, []);

  function onEnter() {
    // console.log(productPageIndex, productLastPage, 'productLastPage')
    if (exhibitor2021PageIndex < exhibitor2021LastPage) {
      dispatch({
        type: 'index/apiGetExhibitor2021',
        payload: {
          pageSize: 10,
          page: exhibitor2021PageIndex + 1,
          key: value,
        },
      });
    }
  }
  const intl = useIntl();
  return (
    <div className={styles.page}>
      {/* <img src={require('../../assets/boothLayout/img0.jpg')} alt="" srcset="" /> */}
      <div className={styles.searchBox}>
        <input
          onChange={onChange}
          placeholder={intl.formatMessage({ id: 'SEARCH_KEYWORDS' })}
          value={value}
        ></input>
        <img src={searchIcon} onClick={handelSearch}></img>
      </div>
      <div className={styles.content}>
        <Tabs>
          <Tabs.Tab title={'所有'} key={null}>

          </Tabs.Tab>
          {venues.map((venue) => {
            return (
              <Tabs.Tab title={venue.number} key={venue.number}>

              </Tabs.Tab>
            );
          })}
          ,
        </Tabs>
        ,
        {exhibitor2021List &&
          exhibitor2021List.map((item, index) => {
            if (index == exhibitor2021List.length - 1) {
              return (
                <InViewPort onEnter={onEnter} key={index}>
                  <div className={styles.item}>
                    <p className={styles.typeId}>
                      <span className={styles.id}>{item.boothNumber}</span>
                      <span className={styles.type}>{item.properties.exhibitCategories}</span>
                    </p>
                    <p className={styles.company}> {item.name}</p>
                    <p className={styles.text}>{item.nameEn}</p>
                  </div>
                </InViewPort>
              );
            }
            return (
              <div className={styles.item}>
                <p className={styles.typeId}>
                  <span className={styles.id}>{item.boothNumber}</span>
                  <span className={styles.type}>{item.properties.exhibitCategories}</span>
                </p>
                <p className={styles.company}> {item.name}</p>
                <p className={styles.text}>{item.nameEn}</p>
              </div>
            );
          })}
      </div>
    </div>
  );
}

export default Index;
